<template>
	<view class="box">
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="tipType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
		<view class="header"></view>
		<!-- 结束充电开仓提示框 -->
		<uni-popup ref="alertDialog" type="dialog">
			<!-- 0: '空闲',
			1: '使用中',
			2: '故障' -->
			<uni-popup-dialog v-if="msgType == 'stop'" type="success" title="提示" content="确认要结束订单吗?"
				@confirm="dialogConfirm()"></uni-popup-dialog>
			<uni-popup-dialog v-else type="success" title="提示" :content="msgType == 'openAndWare'?'确定要开仓取电吗？':'确定要开仓吗？'"
				@confirm="openWareConfirm()">
			</uni-popup-dialog>
		</uni-popup>
		<view class="content">
			<uni-card title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view style="padding: 10px;">
							<text>{{ dataDetail.name || '' }}&nbsp;{{ binIndex || '' }}号仓</text>
							<!-- <view style="float: right;">
								<image style="width: 30rpx; height: 30rpx;" src="../../static/signal5.png"></image>
							</view> -->
						</view>
						<view class="clear"></view>
					</view>
				</template>
				<view class="uni-body">
					设备编号：<text>{{ dataDetail.code || '' }}</text>
				</view>
				<view class="uni-body">
					地址：<text>{{ dataDetail.address || '暂无' }}</text>
				</view>
				<view class="uni-body">
					所属场站：<text>{{ dataDetail.chargingNetwork.name || '暂无' }}</text>
				</view>
				<view class="uni-body">
					所属运营商：<text>{{ dataDetail.chargingNetwork.organization.name || '暂无' }}</text>
				</view>
				<view v-if="wareStatus === '1'" class="uni-body">
					订单日期：<text>{{ form.userCharging.orderDate || '' }}</text>
				</view>
				<view class="uni-body">
					联系人电话：<text>{{ dataDetail.chargingNetwork.contactPhone || '暂无' }}</text>
					<text @click="telPhone(dataDetail.chargingNetwork.contactPhone)"
						style="margin-left: 15px; font-size: 14px; color: #4DA7FF;">
						<text class="icon iconfont" style="margin-right: 5px; color: #4DA7FF;">&#xe96d;</text>联系
					</text>
				</view>
			</uni-card>
			<!-- 空闲 -->
			<!-- <uni-card v-if="wareStatus === '0'" title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view style="padding: 10px;">
							<text>计费模式</text>
						</view>
						<view class="clear"></view>
					</view>
				</template>
				<view style="background-color: #F7F7F7; padding: 15px 10px;">
					<view style="color: #000000; font-size: 16px; margin-bottom: 10px;">充电费用：</view>
					<view style="float: left;">
						<text>按时收费{{ form.userCharging.chargeIntervalPrice.cost || 0 }}元/{{ form.userCharging.chargeIntervalPrice.unitVolume || 0 }}小时</text>
					</view>
					<view class="clear"></view>
				</view>
				<view style="background-color: #F7F7F7; padding: 15px 10px; margin-top: 5px;">
					<view style="color: #000000; font-size: 16px; margin-bottom: 10px;">占仓费用：</view>
					<view style="float: left; width: 50%;">
						<text>所选充电时段内免费超出{{ form.charge.occupyChargePrice || 0 }}元/{{ form.charge.occupyChargeDuration || 0 }}小时,{{ form.charge.occupyChargeUpperLimit || 0 }}元封顶</text>
					</view>
					<view class="clear"></view>
				</view>
			</uni-card> -->
			<!-- 使用中 -->
			<uni-card v-if="form.id && binstatus == 1" title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view style="padding: 10px;">
							<text>充电时长</text>
						</view>
						<view class="clear"></view>
					</view>
				</template>
				<view>
					<view>
						开始时间：<text v-if="form.startTime">{{ formatDate(form.startTime)}} {{formatTime(form.startTime)}}</text>
					</view>
					<view style="margin-top: 10px;">
						实时功率：<text>{{ (form.power|| 0 / 10).toFixed(2) }}W</text>
					</view>
				</view>
				<view class="uni-body" style="margin-top: 10px;">
					结束时间：<text v-if="form.endTime">{{ formatDate(form.endTime)}} {{formatTime(form.endTime)}}</text>
				</view>
			</uni-card>
			<uni-card v-if="form.id && binstatus == 1" title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view class="orders">
							<text>订单信息</text>
						</view>
						<view class="clear"></view>
					</view>
				</template>
				<view>
					<view class="uni-body" style="margin-top: 10px;">
						订单编号：<text>{{form.code}}</text>
					</view>
					<view class="uni-body" style="margin-top: 10px;">
						订单状态：<text>{{statusData[form.status]}}</text>
					</view>
				</view>
			</uni-card>
			<uni-card v-if="form.id && binstatus == 1" title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view class="orders">
							<text>订单费用</text>
							<button @click="tellUser()" v-if="form.mobile" type="primary" size="mini"
								style="background-color: #4DA7FF; height: 50rpx; line-height:50rpx;">联系用户</button>
						</view>
						<view class="clear"></view>
					</view>
				</template>
				<view style="background-color: #F7F7F7; padding: 15px 10px;">
					<view style="color: #000000; font-size: 16px; margin-bottom: 10px;">充电费用：</view>
					<view style="float: left;">
						<view v-if="form.chargeTmplPrice.type =='DURATION'">
							按时收费 {{ form.chargeTmplPrice.price || 0 }}元/{{ form.chargeTmplPrice.unit || 0 }}小时
						</view>
						<view v-else-if="form.chargeTmplPrice.type =='QUANTITY'">
							按电量收费 {{ form.chargeTmplPrice.price || 0 }}元/{{ form.chargeTmplPrice.unit || 0 }}kW·h
							服务费{{ form.chargeTmplPrice.serviceFee || 0 }}元/kW·h
						</view>
					</view>
					<view style="float: right;">
						<text
							style="color: #000000; font-size: 16px; font-weight: bold;">{{ form.price.powerFees || 0 }}&nbsp;元</text>
						<!-- <text style="color: #000000; margin-left: 15px;">已支付</text> -->
					</view>
					<view class="clear"></view>
				</view>
				<view style="background-color: #F7F7F7; padding: 15px 10px; margin-top: 5px;">
					<view style="color: #000000; font-size: 16px; margin-bottom: 10px;">占仓费用：</view>
					<view style="float: left; width: 50%;">
						<text>所选充电时段内免费超出{{ dataDetail.chargeTmpl.occupyChargePrice || 0 }}元/{{ dataDetail.chargeTmpl.occupyChargeDuration || 0 }}小时,{{ dataDetail.chargeTmpl.occupyChargeUpperLimit || 0 }}元封顶</text>
					</view>
					<view style="float: right;">
						<text
							style="color: #000000; font-size: 16px; font-weight: bold;">{{ form.price.occupyCabinetFees || 0 }}&nbsp;元</text>
						<!-- <text v-if="form.userCharging.isPayOccupyFees === 0"
							style="color: #000000; margin-left: 15px;">待支付</text>
						<text v-if="form.userCharging.isPayOccupyFees === 1"
							style="color: #000000; margin-left: 15px;">已支付</text> -->
					</view>
					<view class="clear"></view>
				</view>
				<view style="background-color: #F7F7F7; padding: 15px 10px;margin-top: 5px;" class="flexed">
					<view style="color: #000000; font-size: 16px;">服务费：</view>
					<text style="color: #000000; font-size: 16px; font-weight: bold;">{{ form.price.serviceFees || 0 }}元</text>
				</view>
				<view style="background-color: #F7F7F7; padding: 15px 10px;margin-top: 5px;" class="flexed">
					<view style="color: #000000; font-size: 16px;">账单总额：</view>
					<text style="color: #000000; font-size: 16px; font-weight: bold;">{{ form.price.totalBill || 0 }}元</text>
				</view>
			</uni-card>
			<!-- 故障 -->
			<uni-card v-if="binstatus == 2" title="" extra="">
				<template v-slot:title>
					<view style="border-bottom: 1px solid #E6E6E6;">
						<view style="padding: 10px;">
							<text>故障码：{{ faultCode || '' }}</text>
						</view>
						<view class="clear"></view>
					</view>
				</template>
				<view>
					{{ faultName }}
				</view>
			</uni-card>
			<view class="operate_btns">
				<!-- <button :loading="stopLoading" @click="stop()" v-if="binstatus == 1" type="primary" size="mini"
					style="margin-right: 20rpx; background-color: #4DA7FF; width: 220rpx; height: 80rpx; line-height: 80rpx;">结束充电</button> -->
				<button :loading="stopLoading" @click="stop()" v-if="binstatus == 1 && form.status == 22" type="primary"
					size="mini"
					style="margin-right: 20rpx; background-color: #4DA7FF; width: 220rpx; height: 80rpx; line-height: 80rpx;">结束订单</button>

				<button :loading="openLoading" :class="{ 'openWareWidth' : binstatus != 1 ||  form.status != 22}"
					@click="openWare()" type="primary" size="mini"
					style="margin-right: 20rpx; background-color: #4DA7FF; width: 180rpx; height: 80rpx; line-height: 80rpx;">开仓</button>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from '../../components/moment.js';
	import {
		equip,
		control,
		charging
	} from '@/api/equip.js';
	import mainjs from '@/common/main.js';

	export default {
		mixins: [mainjs],
		data() {
			return {
				routerParam: {},
				msgType: '',
				faultMemo: '',
				faultBox: ['端口状态', '输出过压(可恢复)', '输出欠压(可恢复)', '输出过流', '输出短路', '充电超时(充电时间大于最长充电时间)', '充电中拔掉插头',
					'继电器状态异常(吸合不上或者断不开)', '未检测到设备(单位时间内检测到设备)', '是否正常结束', '心跳超时', '分路漏电流', '分路过温', '输出过载(分路)', '暂停充电',
					'仓门异常', '风扇故障', '加热部件故障', '系统过流', '系统过载', '消防联动', '系统湿度过大', '输入端电表通讯异常', '系统温湿度传感器异常', '系统散热部件异常',
					'环境湿度异常', '', '', '', '', '', '升级失败'
				],
				form: {},
				wareStatus: '',
				tipType: '',
				messageText: '',
				stopLoading: false,
				openLoading: false,

				dataDetail: {},
				code: '', //充电柜code
				binIndex: '', //几号仓
				binId: '', //仓id
				binstatus: '', //仓状态
				faultCode: '', //故障码
				faultName: '', //故障名称
				statusData: {
					// status == -1 订单取消；0 预付待确认 1 订单确认 5 发起充电失败 10 发起充电成功
					// 11 充电中 12 充电暂停 13 充电结束 22 结算完成 25 订单结算完成 30 订单完结
					'-1': '订单取消',
					'0': '预付待确认',
					'1': '订单确认',
					'5': '发起充电失败',
					'10': '发起充电成功',
					'11': '充电中',
					'12': '充电暂停',
					'13': '充电结束',
					'22': '结算完成',
					'25': '订单结算完成',
					'30': '订单完结'
				},
			}
		},
		onLoad(option) {
			// 获取仓状态
			this.code = option.code;
			this.binIndex = option.binIndex;
			this.binId = option.binId;
			this.binstatus = option.binstatus;
			this.routerParam = option;
			this.getDataList();
			// 0: '空闲',1: '使用中',2: '故障'
			if (this.binstatus == 2) {
				this.getFault();
			}
		},
		created() {},
		methods: {
			getOrderDetail() {
				equip('/selectBinById', 'get', {
					binId: this.binId,
				}).then(res => {
					this.form = res.data;
				}).catch(error => {})
			},

			getDataList() {
				this.$Toast.loading('加载中')
				equip('/selectOAMAllData', 'get', {
					code: this.code
				}).then(res => {
					uni.hideLoading();

					if (res.code == 200) {
						this.dataDetail = res.data;
						let curBin = this.dataDetail.cabinetBins.filter(item => item.id == this.binId);
						if (curBin.length > 0 && curBin[0].status == 1) {
							this.getOrderDetail();
						}
					}
				})
			},
			// 故障信息
			getFault() {
				equip('/selectAlarmById', 'post', {
					chargingCabinetCode: this.code,
					binIndex: this.binIndex
				}).then(res => {
					let datas = res.data;
					this.faultCode = datas.map(item => {
						return item.code
					}).join(' ');
					this.faultName = datas.map(item => {
						return item.name
					}).join(' ');
				}).catch(err => {
					this.$Toast.none(err.message);
				})
			},
			// 日期格式化
			formatDate(value) {
				let date = new Date(value);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? "0" + MM : MM;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				return y + "-" + MM + "-" + d;
			},
			formatTime(value) {
				let date = new Date(value);
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let m = date.getMinutes();
				m = m < 10 ? "0" + m : m;
				let s = date.getSeconds();
				s = s < 10 ? "0" + s : s;
				return h + ":" + m + ":" + s;
			},
			// 解析故障码
			// getFault() {
			// 	let faultCode = this.form.fault.faultCode;
			// 	let faultArrey = faultCode.split('');
			// 	for (let i = 0; i < faultArrey.length; i++) {
			// 		if (faultArrey[i] === '1') {
			// 			faultArrey.splice(i + 1, 0, '.');
			// 			faultArrey.splice(i + 2, 0, ',');
			// 		}
			// 	}
			// 	let faultString = faultArrey.join('');
			// 	let faultBox = faultString.split(',');
			// 	for (let i = 0; i < faultBox.length; i++) {
			// 		if (!faultBox[i].startsWith('.', faultBox[i].length - 1)) {
			// 			this.$delete(faultBox, i, 1);
			// 		}
			// 	}
			// 	for (let i = 0; i < faultBox.length; i++) {
			// 		faultBox[i] = faultBox[i].length - 1;
			// 	}
			// 	for (let i = 0; i < faultBox.length; i++) {
			// 		faultBox[i] = this.faultBox[faultBox[i]]
			// 	}
			// 	this.faultMemo = faultBox.join(',');
			// },
			// 拨打联系电话
			telPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 结束充电
			stop() {
				this.msgType = 'stop';
				this.$refs.alertDialog.open();
			},
			// 开仓
			openWare() {
				this.msgType = this.binstatus == 1 && this.form.id ? 'openAndWare' : 'openWare';
				this.$refs.alertDialog.open();
			},
			// 确认开仓或开仓取电
			openWareConfirm() {
				// 0: '空闲', 1: '使用中',2: '故障'
				this.$Toast.loading('操作中···');
				if (this.binstatus == 1 && this.form.id) {
					equip('/openAndPower', 'get', {
						orderId: this.form.id
					}).then(res => {
						this.$Toast.success(res.message);
						setTimeout(() => {
							this.goback();
						}, 1000)
					})
				} else {
					control('/doorOpen', 'post', {
						chargingCabinetCode: this.code,
						binIndex: this.binIndex
					}).then(res => {
						this.$Toast.success(res.message);
						setTimeout(() => {
							this.goback();
						}, 1000)
					})
				}
			},
			// 是否结束订单
			dialogConfirm(id) {
				charging(`/order/finish?orderId=${this.form.id}`, 'put').then(res => {
					if (res.code == 200) {
						this.$Toast.success('已结束订单');
						setTimeout(() => {
							this.goback();
						}, 1000)
					}
				});
			},
			// 联系用户
			tellUser() {
				uni.makePhoneCall({
					phoneNumber: this.form.mobile
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/common.scss";

	.orders,
	.flexed {
		@include flexLayout(center, space-between);
		padding: 20rpx;
	}

	.header {
		width: 100%;
		background-color: #1976D3;
		height: 70px;
		position: fixed;
		top: 0px;
	}

	.content {
		margin-top: 10px;
	}

	.openWareWidth {
		width: 70% !important;
		margin-right: 0 !important;
	}

	.operate_btns {
		margin: 80rpx 0;
		text-align: center;
	}

	/deep/ button::after {
		border: none;
	}

	/deep/ button {
		margin: 0;
	}
</style>
